<!--首先，将组件在main.js的routerCfg路由中进行注册，然后
该组件可以通过wps.CreateTaskPane(Util.GetUrlPath() + "settings", title)进行加载并显示，
systemdemo.js中的showTaskPane方法是封装的显示方法-->
<template>
  <div class="global">
    <div class="divItem">
      点击以下按钮进行设置
    </div>
    <hr>
    <div class="divItem">
      <div v-for="(item) in points">
        <button @click="抽汽信息设置(item)">{{ item["name"] }}</button>
        <!--        <p>{{抽汽信息描述(item)}}</p>-->
        <input type="text" :value="抽汽信息描述(item)" disabled>
        <button @click="抽汽信息描述(item)">{{ item["name"] }}描述</button>
      </div>
      <p v-show="is_show">未查询到数据，请检查工作簿!</p>
      <p v-show="is_show">需要提供计算使用的原始数据，例如"数据整理"工作表。</p>
      <input type="checkbox">
      <button style="margin:3px;" @click="onclick('确定')">确定</button>
    </div>
  </div>
</template>

<script>
import set from './js/settings.js'  // 外部js方便调试，.vue文件中的代码在wps中无法调试

export default {
  name: "Settings",
  data() {
    return {
      points: [], //set.get_device(),
      is_show: false,
    }
  },
  methods: {
    onclick(id) {
      set.onclick(id);
      this.$forceUpdate()
      this.is_show = this.points.length <= 0;
      // return set.onclick(id);
    },
    抽汽信息设置(name) {
      set.抽汽信息设置(name);
      this.$forceUpdate();
    },
    抽汽信息描述(item) {
      return set.抽汽信息描述(item);
    }
  },
  mounted() {
    this.points = set.get_device();
    this.is_show = this.points.length <= 0;
  },
  watch: {
    // points: {
    //   deep: true
    // }
  }
}
</script>

<style scoped>
.global {
  font-size: 15px;
  min-height: 95%;
}

.divItem {
  margin-left: 5px;
  margin-bottom: 18px;
  font-size: 15px;
  word-wrap: break-word;
}
</style>